<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ实例</title>
    <script src="jquery-1.8.0.min.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                $("ul").css("display","none").prevAll().removeClass("hi");
                $(this).children("ul").css("display","block").end().children("h3").addClass("hi");
            })
        })
        $(document).ready(function () {

        })
        jQuery(function () {

        })
        jQuery(document).ready(function () {

        })


        </script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        margin-left: 100px;
        float: left;
    }
    
    h3 {
        display: block;
        width: 200px;
        height: 50px;
        background: green;
        font-size: 20px;
        
    }
    ul {
        display: none;
        width: 200px;
        height: 156px;
        float: left;
        background: yellow;
    }
    ul,li {
        list-style:none
    }
    li {
        line-height: 50px;
        font-size: 20px;
        border: 1px solid black;
    }
    .blockk {
        display: block;
    }
    .hi {
        background: blue;
    }
</style>
<body>
    <div>
        <h3>导航1</h3>
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </div>
    <div>
        <h3>导航2</h3>
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </div>



    <div>
        <h3>导航3</h3>
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </div>
    
</body>
</html>